import React, { useEffect, useState,useRef } from 'react'
import { Button, Modal, Image, Space, message, Table,Tag,Layout,Row,Col,Input} from 'antd';
import { useNavigate } from 'react-router-dom'
import axios from 'axios';
import { Navigate } from 'react-router-dom';
import moment from 'moment'
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
export default function Index() {
    const [loginUser, setLoginUser] = useState(JSON.parse(localStorage.getItem("loginUser")))
    const [originData, setOriginData] = useState(0);
    const { Header, Sider, Content } = Layout;
    const expressRef = useRef();
    const navigate = useNavigate();
    useEffect(() => {
        message.destroy();
        axios.get("http://localhost:8080/qryAllGiftHistory").then(resp => {
            console.log(resp);
            setOriginData(resp.data.data)
        }).catch(err => {
            console.log(err);
            message.error("请求失败!", 1)
        })
        return () => {
        };
    }, []);
    const cancelGiftBuy = (record) => {

        Modal.confirm({
            title: '警告',
            content: `确认要撤回兑换吗?`,
            onOk() {
                let params = {id:record.id,userid:record.userid,giftId:record.giftid};
                console.log("取消礼物兑换:",params);
                axios.post("http://localhost:8080/cancelGiftBuy",params).then(resp => {
                    if (resp.data.state === "0") {
                        message.success(resp.data.message, 1);
                        setTimeout(() => {
                            window.location.reload()
                        }, 500);
                    } else {
                        message.error(resp.data.message, 1)
                    }
                })
            },
        });
        
    }
    const saveGiftExpress = (record) => {
        Modal.confirm({
            title: '填写物流',
            content: <Input placeholder="物流编号" ref ={expressRef}/>,
            onOk() {
                let params = {id:record.id,expressid:expressRef.current.state.value};
                console.log("保存礼物兑换物流:",params);
                axios.post("http://localhost:8080/saveGiftExpress",params).then(resp => {
                    if (resp.data.state === "0") {
                        message.success(resp.data.message, 1);
                        setTimeout(() => {
                            window.location.reload()
                        }, 500);
                    } else {
                        message.error(resp.data.message, 1)
                    }
                })
            },
        });
    }

    const columns = [
        {
            title: '礼品名称',
            dataIndex: 'name',
            key: 'giftname',
        },
        {
            title: '图片',
            dataIndex: 'photo',
            key: 'photo',
            render: (text, record) => (
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', }} key="photofile">
                    <Image
                        width={100}
                        height={100}
                        src={`http://localhost:8080/getGiftPhoto?id=${record.giftid}`}
                    />
                </div>
            ),
        },
        {
            title: '兑换者',
            dataIndex: 'nickname',
            key: 'nickname',
           
        },
        {
            title: '订单状态',
            dataIndex: 'state',
            key: 'state',
            filters: [
                {
                  text: '待发货',
                  value: 0,
                },
                {
                  text: '已取消',
                  value: 1,
                },
                {
                    text: '已发货',
                    value: 2,
                  }
            ],
            render: (text, record) => (
                < >
                    {
                        record.state == 0 ?
                            <Tag color="lime">等待发货</Tag> :
                            record.state == 1 ?
                                <Tag color="#f50">已取消</Tag> :
                                <Tag color="blue">{`快递单号:${record.expressid}`}</Tag>
                    }
                </>


            ),
            onFilter: (value, record) => record.state === value,
        },
        {
            title: '兑换时间',
            key: 'createtime',
            dataIndex: 'createtime',
            sorter: (a, b) => Number(a.createtime) - Number(b.createtime),
            render: (text, record) => (
                <span>{ moment(Number(record.createtime)).format('YYYY-MM-DD HH:mm:ss')}</span>
            ),
        },
        {
            title: 'Action',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    {
                        record.state == 0 ?
                        <Row >
                            <Col span={8}><Button size="small" type="primary" onClick={() => {saveGiftExpress(record)}}>填写物流</Button></Col>
                            <Col span={8} offset={8}><Button size="small" type="primary" danger onClick={() => {cancelGiftBuy(record)}}>取消兑换</Button></Col>
                        </Row>
                        :<></>
                    }
                    
                </Space>
            ),
        },
    ];
    return (
        <Content className="animate__animated animate__fadeIn">
            <Table columns={columns} dataSource={originData} pagination={{pageSize:4}}/>
           
        </Content>
    )
}
